<template>
  <div class="container">
    <!-- <v-header :goBack="true" signinUp="true"></v-header> -->
    <div class="register-wrp">
      <header id="header" class="header">
        <div class="take-desc"></div>
        <div class="cash"></div>
        <div class="other d-flex">
          <div class="people"></div>
          <div class="icon-wrp flex-fill">
            <div class="no-audit"></div>
            <div class="bottom d-flex justify-content-between">
              <div class="low-rate"></div>
              <div class="quick-cash"></div>
            </div>
          </div>
        </div>
      </header>
      <div class="section">
        <div class="form-group btn-register">
          <button type="button" class="btn btn-block" @click="submitForm()">立即取现</button>
        </div>
        <div class="agreement form-group">
          <span class="text">点击即同意</span>
          <a class="text link" href="javascript:void(0);" @click="showAgreement()">《用户服务协议》</a>
        </div>
      </div>
    </div>
    <v-agreement ref="agreement"></v-agreement>
  </div>
</template>

<script type="text/ecmascript-6">
  import {authTakeCash} from '@/service/index'
  import header from '@/components/header/head'
  import userAgreement from '@/components/common/user-agreement'

  export default {
    data() {
      return {
        agreement: false
      }
    },
    methods: {
      submitForm() {
        let str = this.$route.query.str
        if (!str || str.length <= 0) {
          /* eslint-disable */
          this.$router.push('/register')
          return
        }
        authTakeCash(str)
          .then((resp) => {
            console.log(resp)
            if (parseInt(resp.code) > 0) {
              location.href = resp.redirectUrl
            }
          })
          .catch((error) => {
            console.log(error)
          })
      },
      showAgreement() {
        this.$refs.agreement.showAgreement()
      }
    },
    components: {
      'v-header': header,
      'v-agreement': userAgreement
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/variable.styl"

  body,html
    background: #FF5302 !important
  .container
    background: transparent
    .register-wrp
      .header
        padding: 0 0.8rem
        background-image: linear-gradient(-180deg, #FFC700 0%, #FF6C26 100%)
        .take-desc
          height: 8rem
          background-size: 100% 100%
          bg-image('/static/images/register/credit_card')
        .cash
          height: 3.6rem
          margin-top: -3.3rem
          background-size: 100% 100%
          bg-image('/static/images/register/card_ma')
        .other
          .people
            width: 6rem
            height: 6.6rem
            margin-left: 1.16rem
            margin-top: -2.26666rem
            background-repeat: no-repeat
            background-size: 100% 100%
            bg-image('/static/images/register/people')
            z-index: 10
          .icon-wrp
            .no-audit
              width: 3rem
              height: 1.6rem
              margin-top: -0.6rem
              margin-left: 2rem
              background-repeat: no-repeat
              background-size: 100% 100%
              bg-image('/static/images/register/no_audit')
            .bottom
              margin-top: 1.2rem
              .low-rate
                width: 3rem
                height: 1.6rem
                margin-left: -1.5rem
                background-repeat: no-repeat
                background-size: 100% 100%
                bg-image('/static/images/register/low_rate')
              .quick-cash
                width: 3rem
                height: 1.6rem
                margin-right: 1rem
                background-repeat: no-repeat
                background-size: 100% 100%
                bg-image('/static/images/register/quick_cash')
      .section
        background: #FF5302
        margin-top: 0 !important
        padding-top: 60px
        .agreement
          text-align: right
          .text
            font-size: .6rem
            color: $color-white
            &.link
              text-decoration: underline
        .form-group
          &.btn-register
            margin-bottom: .4rem
</style>
